<style>
    .layui-form .layui-form-item .layui-inline .layui-form-label {
        width: 150px;
    }
</style>
<div class="table-body">
    <table id="balanceTable" lay-filter="balanceTable"></table>
</div>

<script>
    layui.use(['form', 'table'], function () {
        layui.table.render({
            elem: '#balanceTable',
            height: 'full-99',
            cellMinWidth: '80',
            url: "{:url('maReserve')}",
            id: 'balanceTable',
            totalRow: true,
            cols: [[
                { type: 'numbers'},
                { field: 'create_time', align: 'center', title: 'Create Time' ,width:300 ,totalRowText:'The Total：'},
                { field: 'amount', align: 'right', style:'color:#FF5722;font-weight:bold' , title: 'Amount($)' ,width:300 ,totalRow: true},
                { title: 'Type',
                    templet: function (d) {
                        const type = d.type;
                        var color='green';
                        if(type == 'DEBIT'){
                            color='red';
                        }
                        return '<span style="color:' + color + '">' + type + '</span>';
                    }, align: 'right' , width:200
                }
            ]],
            page: true,
            limit: 100,
            limits: [100],
        });
    });
</script>